<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
      text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <template v-for="item in items">

        <template v-if="item.children && item.children.length">
          <!-- 二级菜单 -->
          <el-submenu :index="item.id + ''" :key="item.id">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单子菜单 -->
            <template v-for="subItem in item.children ">
              <!-- <el-submenu v-if="subItem.children && item.children.length" :index="subItem.id + ''" :key="subItem.id">
                <template #title>{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">{{
                    threeItem.title
                }}</el-menu-item>
              </el-submenu> -->
              <el-menu-item :index="subItem.path" :key="subItem.path">{{ subItem.title }}</el-menu-item>

            </template>


          </el-submenu>

        </template>
        <!-- 一級菜单 系统首页 -->
        <template v-else>
          <el-menu-item :index="item.path" :key="item.id">
            <i :class="item.icon"></i>
            <template #title>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>

  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          icon: "bi bi-house-door",
          path: "/admin/dashboard",
          title: "系统首页",
        },
        {
          icon: "bi bi-gear",
          title: "权限管理",
          children: [
            {
              path: "/admin/roles",
              title: "角色展示",
            },
            {
              path: "/admin/userList",
              title: "用户信息",
            },
            {
              path: "/admin/menu",
              title: "菜单管理",
            },
          ]
        },
        {
          icon: "bi bi-card-text",

          title: "留言管理",
          children: [
            {
              path: "/admin/messageList",
              title: "留言信息",
            },
          ],
        },

        {
          icon: "bi bi-cursor",

          title: "home页面",
          children: [
            {
              path: "/admin/homeCardInfo",
              title: "校园名人榜",
            },
            {
              path: "/admin/homeNotice",
              title: "校园公告栏",
            },
          ],
        },
        {
          icon: "bi bi-question-diamond",

          title: "党史页面",
          children: [
            {
              path: "/admin/partyHistoryTimeLine",
              title: "党的奋斗史",
            },
            {
              path: "/admin/partyHistoryLeaders",
              title: "领导人展示",
            },
            {
              path: "/admin/partyHistoryQuestions",
              title: "党史答题",
            },
          ],
        },


      ],
    };
  },
  watch: {
    "this.$store.state.userMenu.nav": {
      immediate: true,
      deep: true,
      handler() {
        const nav = this.$store.state.userMenu.nav
        // 递归过滤掉所有的 按钮权限
        // const newNav = treeToArray(nav).filter(item => item.type != 2)
        // let res = transformTree(newNav)
        // console.log(res);
        this.items = nav

      }
    }
  },
  computed: {
    onRoutes() {
      this.$route.path.replace("/", "");
      return "1";
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
};

function treeToArray(tree) {
  var res = []
  for (const item of tree) {
    const { children, ...i } = item
    if (children && children.length) {
      res = res.concat(treeToArray(children))
    }
    res.push(i)
  }
  return res
}

function transformTree(list) {
  const tree = []

  for (let i = 0, len = list.length; i < len; i++) {
    if (!list[i].parent_ind) {
      const item = queryChildren(list[i], list)
      tree.push(item)
    }
  }
  return tree
}

function queryChildren(parent, list) {
  const children = []
  for (let i = 0, len = list.length; i < len; i++) {
    if (list[i].parent_ind === parent.name) {
      const item = queryChildren(list[i], list)
      children.push(item)
    }
  }
  if (children.length) {
    parent.children = children
  }
  return parent
}


</script>
<style scoped src="@/assets/Admincss/main.css">
</style>
<style lang="less" scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar>ul {
  height: 100%;
}

.el-menu i {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>
